<template>
  <div class="app-container">
    <el-form
      class="list-search"
      :model="queryParams"
      
      ref="queryRef"
      :inline="true"
      label-width="100"
    >
      <el-form-item label="请选择公司" v-if="user.userType != 2" prop="companyCode">
        <el-select
          v-model="queryParams.companyCode"
          placeholder="请选择公司"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in companyList"
            :key="dict.companyCode"
            :label="dict.companyName"
            :value="dict.companyCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="title" >
        <el-select
          v-model="queryParams.businessType"
          placeholder="请选择业务类型"
          clearable
          style="width: 240px"
        >
        <el-option
            key="1"
            label="首页轮播图"
            value="1"
          />
          <el-option
            key="3"
            label="服务轮播图"
            value="3"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="isActive" >
        <el-select
          v-model="queryParams.isActive"
          placeholder="请选择状态"
          clearable
          style="width: 240px"
        >
          <el-option
            key="1"
            label="启用"
            value="1"
          />
          <el-option
            key="0"
            label="停用"
            value="0"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="search()"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="addDyn"> 新增 </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" v-if="user.userType == 2" class="mb8">
      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="ID" align="center" prop="id" width="100" />
      <!-- <el-table-column label="标题" align="center" prop="title" width="100" /> -->

      <el-table-column label="图片" align="center" >
        <template #default="{ row }">
          <img class="userImg" :src="VITE_APP_BASE_API + row.imageUrl" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        label="归属公司"
        v-if="user.userType != 2"
        align="center"
        prop="tel"
      >
        <template #default="{ row }">
          {{
            filterName(
              companyList,
              row.companyCode,
              "companyCode",
              "companyName"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column label="业务类型" align="center" prop="title">
        <template #default="{ row }">
          <span v-if="row.businessType == 1">首页轮播图</span>
          <span v-if="row.businessType == 3">服务轮播图</span>
        </template>
      </el-table-column>
      <el-table-column label="跳转类型" align="center" prop="linkType">
        <template #default="{ row }">
          <span v-if="row.linkType == 1">首页咨询</span>
          <span v-if="row.linkType == 2">动态</span>
          <span v-if="row.linkType == 3">问卷</span>
          <span v-if="row.linkType == 4">表单</span>
          <span v-if="row.linkType == 5">外联</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="isActive">
        <template #default="{ row }">
          <span v-if="row.isActive == 0" style="color: #f56c6c">停用</span>
          <span v-if="row.isActive == 1" style="color: #67c23a">启用</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="更新时间" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="editDyn(row)">
            修改
          </el-button>
          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否删除"
            @confirm="del(row)"
          >
            <template #reference>
              <el-button link type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-drawer
      :title="operationType == 'add' ? '添加图片' : '编辑图片'"
      v-model="open"
      size="900px"
      append-to-body
    >
      <div class="dyn_content">
        <el-form
          ref="ruleFormRef"
          style="max-width: 1200px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item
            label="所属公司"
            v-if="user.userType != 2"
            prop="companyCode"
          >
            <el-select
              v-model="ruleForm.companyCode"
              placeholder="请选择公司"
              clearable
              @change="chagneCompany"
              style="width: 240px"
            >
              <el-option
                v-for="dict in companyList"
                :key="dict.companyCode"
                :label="dict.companyName"
                :value="dict.companyCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" prop="businessType">
            <el-select
              v-model="ruleForm.businessType"
              placeholder="请选择业务类型"
              clearable
              style="width: 240px"
            >
              <!-- <el-option v-for="item in business_type" :key="item.value" :label="item.label" :value="item.value" /> -->
              <el-option key="1" label="首页轮播图" value="1" />
              <el-option key="3" label="服务轮播图" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="启用状态" prop="isActive">
            <el-radio-group v-model="ruleForm.isActive">
              <el-radio value="1" label="1">启用</el-radio>
              <el-radio value="0" label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="照片" prop="imageUrl">
            <ImageUpload v-model="ruleForm.imageUrl" :limit="1"></ImageUpload>
          </el-form-item>
          <el-form-item label="跳转类型" prop="linkType">
            <el-radio-group v-model="ruleForm.linkType" @change="changeType">
              <el-radio value="1">首页咨询</el-radio>
              <el-radio value="2">动态</el-radio>
              <el-radio value="3">问卷</el-radio>
              <el-radio value="4">表单</el-radio>
              <el-radio value="5">外联</el-radio>
            </el-radio-group>
          </el-form-item>
          <div
            v-if="
              ruleForm.linkType == 1 ||
              ruleForm.linkType == 2 ||
              ruleForm.linkType == 3 ||
              ruleForm.linkType == 4
            "
          >
            <el-form-item :label="'关联地址'" prop="linkUrl">
              <el-select
                v-model="ruleForm.linkUrl"
                placeholder="请选择关联地址"
                clearable
                filterable
                style="width: 240px"
              >
                <el-option
                  v-for="i in linkList"
                  :key="i.id.toString()"
                  :label="i.title"
                  :value="i.id.toString()"
                />
              </el-select>
            </el-form-item>
          </div>
         
          <div v-if="ruleForm.linkType == 5">
            <el-form-item label="网址" prop="linkUrl">
              <el-input v-model="ruleForm.linkUrl" placeholder="请输入网址" />
            </el-form-item>
          </div>
        </el-form>
        <div class="dist_btn">
          <el-button type="primary" plain @click="open = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup name="WebsiteRecord">
import { InfoFilled } from "@element-plus/icons-vue";
import { watch } from "vue";
import {
  queryBasicCompany,
  insertCarouselImageManagement,
  queryCarouselImageManagement,
  updateCarouselImageManagement,
  deleteCarouselImageManagement,
  queryCarouselImageManagementById,
  queryCarouselImageLinkType,
} from "@/api/website/index";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
let VITE_APP_BASE_API = import.meta.env.VITE_APP_BASE_API;

let user = useUserStore();

const { proxy } = getCurrentInstance();
const { business_type } = proxy.useDict("business_type");

let loading = ref(false);
let dataList = ref([]);
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  companyCode: "",
});
// 获取公司列表
let companyList = ref([]);
function getCompanyList() {
  queryBasicCompany({
    pageNum: 1,
    pageSize: 999,
  }).then((res) => {
    companyList.value = res.rows;
  });
}
getCompanyList();
function search() {
  queryParams.value.pageNum = 1;
  getList();
}
// 获取页面列表
let total = ref(0);
function getList() {
  loading.value = true;
  queryCarouselImageManagement(queryParams.value)
    .then((res) => {
      dataList.value = res.rows;
      total.value = res.total;
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
}
getList();
function del(row) {
  deleteCarouselImageManagement(row.id).then((res) => {
    ElMessage.success("删除成功");
    getList();
  });
}
function refresh() {
  queryParams.value.pageNum = 1;
  queryParams.value.companyCode = "";
  queryParams.value.isActive = "";
  queryParams.value.businessType = "";
  getList();
}
let open = ref(false);
function addDyn() {
  open.value = true;
  operationType.value = "add";
  ruleForm.value = {
    businessType: "",
    companyCode: user.userType == 2 ? user.companyCode : "",
    imageUrl: "",
    linkType: "",
    linkUrl: "",
  };
}
function editDyn(row) {
  queryCarouselImageManagementById(row.id).then((res) => {
    ruleForm.value = res.data;
    open.value = true;
    if(ruleForm.value.linkType!=5){
      getlinkList()
    }
    
  });
  operationType.value = "edit";
}
let ruleForm = ref({
  businessType: "",
  companyCode: "",
  imageUrl: "",
  linkType: "",
  linkUrl: "",
});
function changeType() {
  ruleForm.value.linkUrl = null;
  if (ruleForm.value.linkType == 5) {
    return;
  }
  if (
    (ruleForm.value.linkType == 1 ||
      ruleForm.value.linkType == 2 ||
      ruleForm.value.linkType == 3 ||
      ruleForm.value.linkType == 4) &&
    !ruleForm.value.companyCode
  ) {
    ElMessage.error("请选择归属公司");
    ruleForm.value.linkType = null;
    return;
  }

  getlinkList();
}
let linkList = ref([]);
let keyword = ref("");
function getlinkList() {
  let data = {
    companyCode: ruleForm.value.companyCode,
    keyword: "",
    linkType: ruleForm.value.linkType,
  };
  queryCarouselImageLinkType(data).then((res) => {
    linkList.value = res.data;
  });
}
let ruleFormRef = ref(null);
let rules = ref({
  businessType: [
    { required: true, message: "请选择业务类型", trigger: "blur" },
  ],
  companyCode: [{ required: true, message: "请选择公司", trigger: "blur" }],
  isActive: [{ required: true, message: "请选择启用状态", trigger: "blur" }],
  imageUrl: [{ required: true, message: "请上传展示图片", trigger: "blur" }],
  linkType: [{ required: true, message: "请选择跳转类型", trigger: "blur" }],
  linkUrl: [{ required: true, message: "请填写跳转内容", trigger: "blur" }],
});
// 保存 编辑
let operationType = ref("add");
function save() {
  ruleFormRef.value.validate((res) => {
    if (!res) return;
    if (operationType.value == "add") {
      insertCarouselImageManagement(ruleForm.value)
        .then((res) => {
          ElMessage.success("添加成功");
          getList();
          open.value = false;
        })
        .catch((err) => {
          open.value = false;
        });
    } else {
      updateCarouselImageManagement(ruleForm.value)
        .then((res) => {
          ElMessage.success("修改成功");
          getList();
          open.value = false;
        })
        .catch((err) => {
          open.value = false;
        });
    }
  });
}
function chagneCompany() {
  ruleForm.value.linkType = null;
  ruleForm.value.linkUrl = null;
}
</script>

<style scoped lang="scss">
.userImg {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.list_item {
  color: #333;

  .ans {
    padding: 10px 30px;
  }
}

.app-container {
  :deep(.ql-editor) {
    min-height: 400px;
  }
}

.dyn_content {
  padding-bottom: 90px;
}

.dist_btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: -3px -3px 6px #ccc;
  padding: 10px 0;
}
</style>
